.with-bar {
    padding-bottom:104px;
}

body.lock {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    overflow:hidden;
}

.index,.tab-video {
    .tabs-wrap {
        flex: 1;
        overflow: hidden;
    }
    .tabs {
        display: flex;
        background-color:#fff;
        height:88px;
        border-bottom:1px solid #efefef;

        .ui-tabs {
            border:none;
        }
        .add-on {
            position: relative;
            z-index:3;
            top:0;
            display: flex;
            justify-content: center;
            align-items: center;
            height:100%;
            width:86px;
            flex-shrink: 0;
            flex-grow: 0;
            background-color:#fff;
            &::before {
                content: '';
                position: absolute;
                width:30px;
                height:100%;
                left:-30px;
                top:0;
                background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1))
            }
        }
    }
    
}

.ui-toast {
    transition-property:all;
    transition-duration: .2s;
    position: fixed;
    z-index:999999;
    left:0;
    right:0;
    top:100%; 
    opacity:0;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff;
    font-size:30px;
    transform: translate3d(0,100%,0);
    p {
        padding:16px 20px;
        max-width: 690px;
        border-radius:8px;
        background-color: rgba(0,0,0,.5);
    }
    &.toast-out {
        opacity:0;
        top:80%;
    }
    &.toast-in {
        opacity:1;
        top:50%;
        transform: translate3d(0,-50%,0);
    }
}

.page-loading {
    position: absolute;;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display: flex;
    flex-direction: column;

    .loading-box {
        position:relative;
        flex:1;
        overflow: hidden;

        .uicon-loading {
            position: absolute;
            top:0;
            right:0;
            left:0;
            bottom:0;
            margin:auto;
        }
    }

    .placeholder {
        padding:30px;
        .bt {
            width:100%;
            height:320px;
        }
        .bt,.pr,.pl>span {
            border-radius: 4px;
            background-color:#f2f2f2;
        }
        .bi {
            margin-top:30px;
            height:164px;
            display: flex;
        }

        .pr {
            width:230px;
            margin-left:52px;
        }

        .pl {
            flex:1;
            span {
                display: block;
                width:350px;
                height:20px;
                &:first-child {
                    width: 100%;
                }
            }
            span + span {
                margin-top:20px;
            }
        }

    }
}


img[lazy]{
    background-repeat: no-repeat;
    background-size:100px 100px;
    background-position: center;
    background-image:url(../assets/icon-lazy.png);

}

.page-init-loading {
    position:fixed!important;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:#fff;
    z-index:99999;
}

.area-bar {
    background-color:#fff;
   
    .wrap {
        display: flex;
        margin:0 24px;
        border-bottom:1px solid #efefef;
    }
    .item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex:1;
        flex-shrink: 0;
        padding:30px 0;
        color: #5a4640;
        font-size:28px;
        span {
            margin-left:15px;
        }
        img {
            width:30px;
            height:30px;
            overflow: hidden;
        }
    }
}

.list-end {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 106px;
    color:#c6c6c6;
    font-size:28px;
}

.app-download {
    padding:14px 30px;
    justify-content: space-between;
    background-color:rgba(0,0,0,.8);
    
    &.hide {
        display: none;
    }

    &,&>span,.app-logo {
        display: flex;
        align-items: center;
    }
    .app-logo {
        font-size:36px;
        color:#fff;
        img {
            margin-right:12px;
            width:80px;
            height:80px;
        }
    }
    &>span {
        justify-content: center;
        line-height: 1;
        height:48px;
        min-width:112px;
        font-size:22px;
        color:#fff;
        background-color:rgb(230, 74, 25);
    }
}

.ui-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    height:89px;
    width:100%;
    border-bottom:1px solid #e5e5e5;
    background-color:#fff;

    &>a {
        position: relative;
        display: flex;
        align-items: center;
        height:100%;
        font-size:30px;
        color:#999;

        & + a {
            margin-left:80px;
        }

        &.on {
            color:#333;

            &::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                width: 46px;
                height: 6px;
                background-color: #e64a19;
                border-radius: 3px;
            }
        }

    }
}

.bg-white {
    background-color:#fff;
}